<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>日志实时反馈</title>
	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<style>
	ol {
    display: flex;
    flex-direction: column-reverse;
	}
	li {
		flex: 0 0 auto;
	}
</style>
</head>
	<body>
		<div id="toolbar">
			<a href="/list" target="_blank">查看历史存储数据</a>
			<!-- <button id="clear"> Clear </button> -->
		</div>
		<div>
			<ol id="ret">
				打开 Console 查看实时数据
			</ol>
		</div>

		<script>
		const write = ( html )=>{
			$('#ret').append( html );
		};
		$(function () {
			var socket = io.connect('/');
			socket.on('new', function (data) {
				// write('<li>' + JSON.stringify(data) + '</li>'); // 直接通过 console 看
				console.table(data);
			});
			$('#clear').click(()=>{
				$('#ret').text('');
			})
		});

		function test() {
			var param = {
				click: 'test',
				page: window.location.href
			};
			$.post('/add', param, null, 'json');
		}
		</script>
	</body>
</html>